import './index.scss'
// 导入图标组件
import Icon from '@/components/icon'
import _ from 'lodash'

import dp from 'dompurify'

import { useHlCode } from '@/hooks'
import { useEffect } from 'react'
function Test() {
  // 1. 测试differenceBy方法
  var all = [1, 3, 5, 7]
  var my = [1, 7]
  console.log('排除my:', _.differenceBy(all, my))
  var allChannels = [
    { id: 0, name: 'vue' },
    { id: 1, name: 'react' },
    { id: 2, name: 'angular' },
  ]
  var myChannels = [
    { id: 1, name: 'react' },
    { id: 2, name: 'angular' },
  ]
  // 用法：_.differenceBy(所有数据, 要排除数据, 排除对象的标识（id）)
  console.log('排除my:', _.differenceBy(allChannels, myChannels, 'id'))

  // 2. xss攻击和dangerouslySetInnerHTML的安全用法
  const html1 = '<div><script>alert(1)</script></div>'
  const html2 = '<div onclick="alert(1)">xss攻击</div>'
  const html3 = `<div onclick="document.body.innerHTML=''">xss攻击</div>`
  // 对插入页面的html元素进行安全消杀
  const safeHtml = dp.sanitize(html3)

  // 3. 代码块高亮
  useHlCode()
  return (
    <div>
      <h1>test</h1>
      {/* 5. 测试代码块高亮 */}
      <div>
        <pre>
          <code>import React from 'react'</code>
          <code>console.log(React)</code>
        </pre>
      </div>
      {/* 1. 测试原生css变量 */}
      <div className="cssVar">我是局部css变量</div>
      <div className="cssOto">另外一个类</div>
      <hr />
      {/* 2. 1px像素边框bug */}
      <div className="one">
        <div className="top">top</div>
        <div className="btm">bottom</div>
      </div>
      {/* 3. 测试icon图标 */}
      <p>
        <svg className="icon" aria-hidden="true">
          {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
          <use xlinkHref="#iconbtn_like_sel"></use>
        </svg>
        <svg className="icon" aria-hidden="true">
          {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
          <use xlinkHref="#iconbtn_collect_sel"></use>
        </svg>
      </p>
      <p>
        <Icon
          type="iconbtn_like_sel"
          className="ticon"
          onClick={() => {
            console.log(123)
          }}
        />
        <Icon type="iconbtn_collect_sel" />
      </p>
      {/* 4. 测试xss */}
      <div
        dangerouslySetInnerHTML={{ __html: safeHtml }}
        style={{ marginTop: '20px', padding: '60px', border: '2px solid red' }}
      ></div>
    </div>
  )
}

export default Test
